Skip to content

Conversation

@sudo-Harshk
Copy link

Feature: Homepage Grid View with Folder Navigation

What's New

  • Replaced welcome screen with responsive grid view showing all notes and folders
  • Added folder navigation - click folders to browse contents
  • Added breadcrumb navigation for easy navigation
  • Browser back/forward buttons now work correctly with folder state

Testing Checklist

  • Empty state renders correctly
  • Folder navigation (Deep linking)
  • Browser Back/Forward button consistency
  • Responsive grid scaling

Files Changed

  • frontend/index.html - Homepage grid view template
  • frontend/app.js - State management and navigation logic

Screenshot

Homepage Grid View

@gamosoft
Copy link
Owner

Hello there, first of all thank you for taking a look into this app. 😊

I've been looking into your PR and looks very cool indeed, just pulled it to see how it looks and it would be an awesome incorporation indeed.

I haven't looked deep into the code (will do later) but have a couple of comments to add:

  • if you have no notes then the home page looks 'empty', it'd be nice to keep the old behavior with the "add your first note" thing.
image
  • when clicking on a note that has no content, there's an error in the console:
image
  • now that this navigation has been added, it can be good to be able to "navigate" to it, clicking on the top left logo section for example 😉
  • I haven't checked, but it'd be also nice to reuse the same code that is used in the building of the navigation tree to avoid doing it twice.

Kind regards.

…e handling

- Added file size formatting for notes and improved breadcrumb navigation.
@sudo-Harshk
Copy link
Author

sudo-Harshk commented Nov 20, 2025

I've resolved the merge conflicts with the main branch and applied the final fix.

Demo: Empty State & Logo Navigation

Here is a quick demo showing the restored Welcome Screen (for empty states) and the fixed Logo Navigation behavior:

Screenshot 2025-11-20 220730

Recording 2025-11-20 205116 (1)

Summary of Fixes

  1. Empty State: isAppEmpty check now correctly shows the original Welcome Hero for new users.
  2. Logo Navigation: Clicking the logo properly resets the view to the dashboard and clears the search/sidebar state.
  3. File Sizes: Added a formatSize helper. Notes now display accurate sizes (e.g., 12 B or 1.5 KB instead of 0.0 KB) and update instantly on save.
  4. Console Stability: Refactored Alpine.js getters to methods with strict null-checks to prevent MutationObserver crashes on reload.
  5. Refactor: The Grid View now shares the exact same folderTree source as the Sidebar (Single Source of Truth).

@sudo-Harshk
Copy link
Author

Update: I've also verified compatibility with the new v0.3.0 Image features.

I just pushed a few additional fixes to ensure seamless integration:

  • Layout: Fixed a glitch where the Grid View and Image Viewer would overlap.
  • Delete Button: Updated the delete logic to work for both Notes and Images.
  • Navigation: Ensured clicking the Logo correctly closes the Image Viewer and returns to the grid.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants